<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Nickname')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-nickname" data-rule="required" class="form-control" name="row[nickname]" type="text" value="{$row.nickname|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Phone')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-phone" data-rule="required|mobile" class="form-control" name="row[phone]" type="text" value="{$row.phone}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Headeravatar')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-headeravatar" data-rule="required" class="form-control" size="50" name="row[headeravatar]" type="text" value="{$row.headeravatar|htmlentities}">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="plupload-headeravatar" class="btn btn-danger plupload" data-input-id="c-headeravatar" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-headeravatar"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-headeravatar" class="btn btn-primary fachoose" data-input-id="c-headeravatar" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right" for="c-headeravatar"></span>
            </div>
            <ul class="row list-inline plupload-preview" id="p-headeravatar"></ul>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Teaching_year')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-teaching_year" data-rule="required" class="form-control" name="row[teaching_year]" type="number" value="{$row.teaching_year|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Images')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-images" data-rule="required" class="form-control" size="50" name="row[images]" type="text" value="{$row.images|htmlentities}">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="plupload-images" class="btn btn-danger plupload" data-input-id="c-images" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="true" data-preview-id="p-images"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-images" class="btn btn-primary fachoose" data-input-id="c-images" data-mimetype="image/*" data-multiple="true"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right" for="c-images"></span>
            </div>
            <ul class="row list-inline plupload-preview" id="p-images"></ul>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Trait')}:</label>
        <div class="col-xs-12 col-sm-8">
            <textarea id="c-trait" class="form-control " rows="5" name="row[trait]" cols="50">{$row.trait|htmlentities}</textarea>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Profession')}:</label>
        <div class="col-xs-12 col-sm-8">

            <div class="radio">
                {foreach name="professionList" item="vo"}
                <label for="row[profession]-{$key}"><input id="row[profession]-{$key}" name="row[profession]" type="radio" value="{$key}" {in name="key" value="$row.profession"}checked{/in} /> {$vo}</label>
                {/foreach}
            </div>

        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Longitude')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-longitude" data-rule="required" class="form-control" name="row[longitude]" type="text" value="{$row.longitude|htmlentities}" readonly>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Latitude')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-latitude" data-rule="required" class="form-control" name="row[latitude]" type="text" value="{$row.latitude|htmlentities}" readonly>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">地址</label>
        <div class="col-xs-12 col-sm-8">
            <input style="margin-bottom: 10px;" type="text" class="form-control" data-rule="required" name="row[address]" id="place" value="{$row.address}"  placeholder="请输入地址">
            <div class="text-info">请点击地图上位置，获取经纬度</div>
            <div id="container" style="min-width:600px;min-height:600px;"></div>
        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>
<!-- 地图 -->
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=4OIBZ-PTQRX-CXU4J-TP3RZ-LPBP6-J4BPV&libraries=place"></script>

<script>
    var geocoder, map, marker = null;

    function init() {
        //定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
        var map = new qq.maps.Map(document.getElementById("container"), {
            center: new qq.maps.LatLng("{$row.latitude}", "{$row.longitude}"),      // 地图的中心地理坐标。
            zoom: 15                                                 // 地图的中心地理坐标。
        });

        //实例化自动完成
        var ap = new qq.maps.place.Autocomplete(document.getElementById('place'));
        //添加监听事件
        qq.maps.event.addListener(ap, "confirm", function(res){
            searchService.search(res.value);
        });
        //调用Poi检索类。用于进行本地检索、周边检索等服务。
        var searchService = new qq.maps.SearchService({
            map : map
        });
        //添加监听事件   获取鼠标单击事件
        qq.maps.event.addListener(map, 'click', function(event) {
            //调用获取位置方法
            geocoder.getAddress(event.latLng);

        });

        geocoder = new qq.maps.Geocoder({
            complete : function(result){
                var b = result.detail;

                $('#place').val(b.nearPois[0].address+b.nearPois[0].name);
                $('#c-latitude').val(b.location.lat);
                $('#c-longitude').val(b.location.lng);
            }
        });
    }

    init()

</script>